<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <button class="but1">点击</button>
    <ul>
        <li>这是li1</li>
        <li>这是li2</li>
        <li>这是li3</li>
        <li>这是li4</li>
        <li>这是li5</li>
    </ul>
    <script>
        //标签对象，事件名（回调函数（事件对象）{}）:
        //其中回调函数是事件函数 会带有默认的event事件对象
        // jQuery的事件名称与js相比较少了on
        /*   $(".but1").click(function (e) {
              console.log("button被点击了",e);
          }) */

        /*  $(".but1").mouseenter(function (e) {
             console.log("button被点击了",e);
         }) */

        /*  $(".but1").mouseleave(function (e) {
          console.log("button被点击了",e);
      }) */

        /*   hover(callback1,callback2)悬停事件，
          参数1是鼠标移入时执行的函数
          参数2是鼠标移出时执行的函数
          $(".but1").hover(function () {
              //鼠标移入了
              console.log("鼠标移入了");
          },function () {
              // 鼠标移出了
              console.log("鼠标移出了");
          }) */

        /*         m默认的，后创建标签会不带有这个事件
        $("li").click(function () {
            console.log(this); //dom对象 当前点击的li标签
            console.log($(this).index());// 获取当前标签的索引值
        }) */
        // 事件委托
        $("ul").on("click", "li", function () {
            console.log("===");
        })
        // on() 添加一个监听事件
        // $(".but1").on("click",function(){
        //     console.log("but呗点击了");
        // })

        // // off与on是配套使用 用来删除一个监听事件
        // $(".but1").off("click");

        $(".but1").one("click", function () {
            console.log("事件只能执行一次");
        })

        var str = ""
        for (let i = 6; i < 10; i++) {
            str += "<li>这是li" + i + "</li>";
        }
        // append()  在一个元素内追加一些子元素
        // $("ul").append(str);
        // 将子元素追加在谁内
        $(str).appendTo("ul");
    </script>
</body>

</html>